<template>
	<view>
		<wd-overlay :show="infoShow">
			<view class="wrapper">
				<view class="block">
					<text class="title">提示</text>
					<text>{{syncText}}</text>
					<view class='button-part'>
						<wd-button plain :round="false" size="small" style="width: 30%;" @click="closeAccess">
							跳 过
						</wd-button>
						<wd-button :round="false" size="small" style="width: 30%" @click="checkAccess">
							同 步
						</wd-button>
					</view>
				</view>
			</view>
		</wd-overlay>
		<wd-message-box selector="wd-message-box-slot2">
			<view style="height: 30rpx;"></view>
			<wd-form ref="formRef" :model="formModel">

				<view style="display: flex; flex-direction: row; align-items: center;height: 120rpx;">
					<view style='flex:2'>
						<wd-input type="number" prop="captcha" :rules="[{ required: true, message: '请输入验证码' }]"
							v-model="formModel.captcha" placeholder="请输入验证码" />
					</view>
					<image :src="captchaInfo.captcha" @click="getCaptcha"
						style="flex:1; height: 60rpx;border:1px solid #ccc;">
					</image>
				</view>
			</wd-form>

		</wd-message-box>
	</view>
</template>

<script setup name="byzf-login">
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useMessage,
		useToast
	} from '@/uni_modules/wot-design-uni';
	import {
		byzfGetCaptcha,
		byzfCheckAccessToken,
		byzfManualSyncData
	} from '@/common/service/outside';
	const infoShow = ref(false)
	const message2 = useMessage('wd-message-box-slot2');
	const toast = useToast();
	const props = defineProps({
		factoryId: {
			type: String,
			default: ''
		},
		syncText: {
			type: String,
			default: ''
		},
		wasteRecordIds: {
			type: Array,
			default: () => ([])
		},
		pageType: {
			type: String,
			default: 'in-product'
		}
	})
	const emit = defineEmits(['isSyncData', 'errorSyncData', 'closeAccess'])

	const formRef = ref()
	const formModel = ref({})

	const openParams = ref({})
	const captchaInfo = ref({})
	// 获取验证码
	const getCaptcha = async () => {
		const res2 = await byzfGetCaptcha()
		captchaInfo.value = res2.data;
	}
	const syncData = async (flag) => {
		flag ??= false;
		const params = {
			factoryId: props.factoryId,
			wasteRecordIds: props.wasteRecordIds,
		}
		if (flag) {
			params.captcha = formModel.value.captcha;
			params.timeStr = captchaInfo.value.timeStr;
		}
		return await byzfManualSyncData(params)
	}
	// 验证表单
	const validateFn = async () => {
		return new Promise((resolve, reject) => {
			formRef.value.validate().then(({
				valid,
				errors
			}) => {
				// console.log(1, valid, errors)
				// debugger
				if (valid) {
					// debugger
					return resolve()
				} else {
					return reject()
				}
			}).catch(err => {
				// console.log(222)
				return reject()
			})
		})

	}
	// 不同步
	const closeAccess = async () => {
		infoShow.value = false;
		emit('closeAccess', {
			...openParams.value,
			isSyncData: false
		})
		openParams.value = {}
	}
	// 同步
	const checkAccess = async () => {
		formModel.value = {};
		// debugger
		const res = await byzfCheckAccessToken({
			factoryId: props.factoryId
		})
		// console.log(res)
		if (res.data) {
			if (props.pageType == 'in-product') {
				await syncData(false)
				toast.show('操作成功');
			}
			infoShow.value = false;
			emit('isSyncData', {
				...openParams.value,
				isSyncData: true
			});
			openParams.value = {}
			return;
		} else {
			await getCaptcha()
			message2
				.confirm({
					title: '巴渝治废平台登录',
					cancelButtonText: '取消',
					confirmButtonText: '登录',
					beforeConfirm: ({
						resolve,
						reject
					}) => {
						return validateFn().then(() => {
							return resolve(true)
						}).catch(() => {
							return reject(false)
						})
					}
				})
				.then(async () => {
					if (props.pageType == 'in-product') {
						await syncData(true);
						// infoShow.value = false;
						toast.show('操作成功');
					}
					infoShow.value = false;
					emit('isSyncData', {
						...openParams.value,
						isSyncData: true,
						captcha: formModel.value.captcha,
						timeStr: captchaInfo.value.timeStr
					})
					openParams.value = {}
					return

				})
				.catch((error) => {

				});
		}
	}
	const syncInfo = async (data) => {
		openParams.value = data;
		infoShow.value = true;
		formModel.value = {};
		captchaInfo.value = {}
	}
	defineExpose({
		syncInfo,
		checkAccess
	})
</script>

<style lang="scss">
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block {
		width: 600rpx;
		// height: 120px;
		background-color: #fff;
		font-size: 26rpx;
		padding: 10rpx 20rpx 30rpx;
		border-radius: 5rpx;

		.title {
			display: flex;
			font-size: 32rpx;
			width: 100%;
			line-height: 40rpx;
			justify-content: center;
			padding: 10rpx 0;
		}

		.button-part {
			margin-top: 50rpx;
			display: flex;
		}
	}
</style>